<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Pattern</title>
    <link href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" rel="stylesheet">
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <style>
        html,
        body {
            position: fixed;
            top: 0px;
            left: 0px;
            height: 100%;
            width: 100%;
        }

        #particles-js {
            width: 100%;
            height: 100%;
            position: relative;
            background-position: 50% 50%;
            background-size: cover;
            background-repeat: no-repeat;
            margin-left: auto;
            margin-right: auto;
        }

        .el-dialog_body {
            margin-top: 6.25rem;
            width: 50rem;
        }

        .page {
            min-width: 62.5rem;
            overflow-x: auto;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            width: 100%;
            height: 100%;
            background-color: #fffbf0;
            padding-top: 2.5rem;
        }

        .login {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            box-shadow: 1px 1px 5px 0px rgba(7, 72, 206, 0.4);
            width: 53.125rem;
            height: 23.125rem !important;
            border-radius: 6px;
            margin: auto;
        }

        .btn_right {
            margin: 0 auto;
        }
    </style>
</head>
<body>
<div id="app" class="page">
    <div id="particles-js"></div>
    <el-container>
        <el-main>
            <div style="top:0; position: absolute;left:0"><image src="/work_main/images/pattern.png" style="width: 15.625rem"></image></div>
            <div class="login">
                <el-form class="el-dialog_body" :model="loginForm" label-width="50px">
                    <el-form-item>
                        <el-input v-model="loginForm.account" placeholder="请输入账号"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="loginForm.password" show-password placeholder="请输入登录密码"></el-input>
                    </el-form-item>
                    <el-row style="margin-left: 37.5rem">
                        <el-button class="btn_right" type="primary" @click="onlogin">登陆</el-button>
                    </el-row>
                    <el-row style="margin-left: 37.5rem;margin-top: 5px">
                        <a @click="third('qq')">
                            <el-col :span="3" title="QQ登陆"><i class="fa fa-qq fa-1x fa-fw"></i></el-col>
                        </a>
                        <a @click="third('wechat_open')">
                            <el-col :span="3" title="微信登陆"><i
                                class="fa fa-wechat fa-1x fa-fw"></i>
                            </el-col>
                        </a>
                        <a @click="third('weibo')">
                            <el-col :span="3" title="微博登陆"><i
                                class="fa fa-weibo fa-1x fa-fw"></i>
                            </el-col>
                        </a>
                    </el-row>
                </el-form>
            </div>
        </el-main>
    </el-container>

</div>
</body>
<script src="/work_main/js/sockjs.min.js"></script>
<script src="/work_main/js/stomp.js"></script>
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<script src="https://cdn.bootcss.com/vue/2.5.21/vue.min.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
<script>

  const app = new Vue({
    el: '#app',
    data: function () {
      return {
        isConnected: false,
        headers: null,
        stompClient: {},
        socket: {},
        token: null,
        state: null,
        loginForm: {
          account: null,
          password: null
        },
      }
    },
    mounted() {
      // this._initSockJs();
      this.initParticlesJS ();
    },
    methods: {
      third(source) {
        // this._initSockJs();
        axios.get('/work_main/login_auth/target_link/' + source)
          .then(res => {
            let data = res.data.data;
            this.state = data.state;
            window.location.href = data.url;
          });
      },
      _generateUUID() {
        var d = new Date().getTime();
        if (window.performance && typeof window.performance.now === "function") {
          d += performance.now(); //use high-precision timer if available
        }
        var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
          var r = (d + Math.random() * 16) % 16 | 0;
          d = Math.floor(d / 16);
          return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);
        });
        return uuid;
      },
      getCookie(name) {
        var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
        if (arr = document.cookie.match(reg))
          return unescape(arr[2]);
        else
          return null;
      },
      _initSockJs() {
        this.token = this.getCookie("token") != null ? this.getCookie("token") : this._generateUUID();
        console.log(this.token)
        this.socket = new SockJS("/socketserver/socket");
        this.stompClient = Stomp.over(this.socket);
        this.headers = {
          //token为登陆会话返回的token
          UUID: this.token
        };
        this.stompClient.connect(this.headers, (frame) => {
          this._addEle('websocket连接成功:' + frame);
          this.isConnected = true;
          // this.$message('websocket服务器连接成功');
          //公共接收主题
          this.stompClient.subscribe("/topic/session", (response) => {
            this._addEle(response.body)
          });
          //定点接收信息订阅主题
          this.stompClient.subscribe("/user/topic/session", (response) => {
            this._addEle(response.body)
          });
        });
      },
      _destroySockJs() {
        if (this.stompClient != null) {
          this.stompClient.disconnect();
          this.socket.onclose;
          this.socket.close();
          this.stompClient = {};
          this.socket = {};
          this.isConnected = false;
        }
        this.$message.error('websocket断开成功！');
        this._addEle('websocket断开成功！')
      },
      _addEle(text) {
        console.log(text)
      },
      onlogin() {
        let formData = new FormData();
        formData.append("account", this.loginForm.account);
        formData.append("password", this.loginForm.password);
        axios.post('/work_main/login', formData)
          .then(res => {
            if (res.data.code == 1 || res.data.code == 30) {
              window.location.href = "/work_main/face";
            }
          });
      },
      initParticlesJS () {
        particlesJS('particles-js', {
          "particles": {
            "number": {
              //下面这个数约大越密集 太大浏览器会卡
              "value": 18,
              "density": {
                "enable": true,
                //下面这个数约大越稀疏 太小浏览器会卡
                "value_area": 60
              }
            },
            //交点的颜色
            "color": {
              "value": "#ea4343"
            },
            //别动就对了-——
            "shape": {
              "type": "circle",
              "stroke": {
                "width": 0,
                "color": "#ffffff"
              },
              "polygon": {
                "nb_sides": 5
              },
              "image": {
                "src": "img/github.svg",
                "width": 100,
                "height": 100
              }
            },
            //透明度
            "opacity": {
              "value": 0.1,
              "random": false,
              "anim": {
                "enable": false,
                "speed": 1,
                "opacity_min": 0.1,
                "sync": false
              }
            },
            //端点尺寸
            "size": {
              "value": 2,
              "random": true,
              "anim": {
                "enable": false,
                "speed": 40,
                "size_min": 0.1,
                "sync": false
              }
            },
            //线
            "line_linked": {
              "enable": true,
              "distance": 80,
              //距离内连线
              "color": "#c98484",
              "opacity": 0.4,
              "width": 1
            },
            //移动属性
            "move": {
              "enable": true,
              //动画速度在这里！！
              "speed": 3,
              "direction": "none",
              "random": false,
              "straight": false,
              "out_mode": "out",
              "attract": {
                "enable": false,
                "rotateX": 600,
                "rotateY": 1200
              }
            }
          },
          //交互
          "interactivity": {
            "detect_on": "canvas",
            "events": {
              //鼠标滑过 和 鼠标点击 属性模式 //true表示开启 false 关闭
              "onhover": {
                "enable": true,
                "mode": "grab"
              },
              "onclick": {
                "enable": true,
                "mode": "push"
              },
              "resize": true
            },
            //各种模式属性 把属性名替换 两个状态的 "mode": 即可1653/1657附近 "grab" "bubble" "repulse" "push" "remove"
            //下面是鼠标事件名称
            "modes": {
              //鼠标与distance范围内点连线
              "grab": {
                "distance": 100,
                "line_linked": {
                  "opacity": 1
                }
              },
              //改变周围点相应属性
              "bubble": {
                "distance": 100,
                "size": 10,
                "duration": 2,
                "opacity": 8,
                "speed": 3
              },
              //鼠标周围distance范围排斥
              "repulse": {
                "distance": 100
              },
              //添加 或 删除点de数量
              "push": {
                "particles_nb": 4
              },
              "remove": {
                "particles_nb": 2
              }
            }
          },
          "retina_detect": true,
        })
      }
    },
    beforeDestroy() {
      this._destroySockJs();
    },
  })
</script>
</html>